<template>
  <div style="padding-left:5px; width:100%; margin:5px 0;">
      <h3>假勤管理</h3>
      <el-card style="width:  100%;" shadow="never">
          <el-row :gutter="10">
              <el-col :span="3"  @click="handleClick('/LeaveApplication')" style="margin-right: 10px; padding-left:20px;">
                      <img src="../../../public/processImg/leave.png" height="125" style="width: 80%"/>
              </el-col>

          </el-row>
      </el-card>
      <h3>人事管理</h3>
        <el-card style="width: 100%" shadow="never">
            <el-row :gutter="10">
             <el-col :span="3" @click="handleClick('/EmployeeApplication')">
                     <img src="../../../public/processImg/entry.png" height="125" style="width: 80%"/>
             </el-col>
                <el-col :span="3" @click="handleClick('/regularApplication')">
                        <img src="../../../public/processImg/regular.png" height="125" style="width: 80%"/>
                </el-col>
                <el-col :span="3" @click="handleClick('/departmentApplication')">
                        <img src="../../../public/processImg/off.png" height="125" style="width: 80%"/>
                </el-col>
                <el-col :span="3" @click="handleClick('/resignationApplication')">
                        <img src="../../../public/processImg/quit.png" height="125" style="width: 80%"/>
                </el-col>
            </el-row>
        </el-card>
          <h3>行政管理</h3>
          <el-card shadow="never">
              <el-row :gutter="10" >
               <el-col :span="3" @click="handleClick('/MeetingRoom')">
                       <img src="../../../public/processImg/meetingRoom.png" height="125" style="width: 80%"/>
               </el-col>
                  <el-col :span="3" @click="handleClick('/EquipmentApplication')">
                          <img src="../../../public/processImg/item.png" height="125" style="width: 80%"/>
                  </el-col>
              </el-row>
          </el-card>
          <h3>财务管理</h3>
          <el-card shadow="never">
              <el-row :gutter="10">
                  <el-col :span="3" @click="handleClick('/ReimbursementApplication')">
                          <img src="../../../public/processImg/reimbursement.png" height="125" style="width: 80%"/>
                  </el-col>
                  <el-col :span="3" @click="handleClick('/Invoice')">
                          <img src="../../../public/processImg/invoice.png" height="125" style="width: 80%"/>
                  </el-col>
                  <el-col :span="3" @click="handleClick('/PaymentApplication')">
                      <img src="../../../public/processImg/purchase.png" height="125" style="width: 80%"/>
                  </el-col>
              </el-row>
          </el-card>
    </div>

</template>

<script>
import { defineComponent } from 'vue';
import {
  Document, UserAdd, Meeting, Car, Library
} from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';

export default defineComponent({
  components: {
    ElIcon: Document // Element Plus 图标按需引入
  },
  setup() {
    const router = useRouter();

    return {
      handleClick(path) {
        router.push(path);
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }
    };
  }
});
</script>

<style scoped>
/* 组件通用悬停效果 */
img:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  z-index: 1;
}
</style>